<?php
/**
 * @link https://www.kancloud.cn/cleverstone/ymb2
 * @copyright Copyright (c) 2020 Yii Manager Software LLC
 */

/** @var \yii\web\View $this */
/** @var \builder\form_step\FormStepBuilder $context 当前分步表单组件实例 */
/** @var array $stepItem 分步项 */
/** @var array $rootLayout 根布局 */
/** @var array $footerBtn 尾部按钮 */

// 上下文对象
$context = $this->context;
// 总步数
$countStep = count($stepItem);
?>
<div id="__YM2_BUILDER_ID__<?= $context->id ?>" ng-controller="ym2.ctrl.<?= $context->id ?>" class="ym2-form-step-ui card border-0 <?= $rootLayout['class'] ?>" style="<?= $rootLayout['style'] ?>"<?= $rootLayout['attribute'] ?>>
    <div class="card-header bg-white border-0 px-5">
        <div class="step-header d-flex align-items-center justify-content-center">
<?php foreach ($stepItem as $index => $item): ?>
            <div class="header-item flex-grow-<?= $index + 1 >= $countStep ? 0 : 1 ?> flex-shrink-0 cursor-pointer d-flex flex-column justify-content-center"
                 ng-class="{
                    'item-checked text-primary': currentPageIndex == <?= $index ?>,
                    'layui-font-gray': currentPageIndex > <?= $index ?>,
                    'layui-font-black': currentPageIndex < <?= $index ?>,
                }">
                <div class="d-flex">
                    <span class="layui-font-20 item-icon" ng-class="{
                        '<?= $context->stepIconActiveMap[$index] ?>': currentPageIndex === <?= $index ?>,
                        '<?= $context->stepOkIcon ?>': currentPageIndex > <?= $index ?>,
                        '<?= $context->stepIconMap[$index] ?>': currentPageIndex < <?= $index ?>
                    }"></span>
<?php if ($index + 1 < $countStep):?>
                        <hr class="flex-grow-1 border-top-0"
                            ng-class="{
                                'border-bottom-primary': currentPageIndex === <?= $index ?>,
                                'border-bottom': currentPageIndex > <?= $index ?>,
                                'border-bottom border-secondary': currentPageIndex < <?= $index ?>,
                        }"/>
<?php endif; ?>
                </div>
                <span class="item-title f16"><?= $item['title'] ?></span>
            </div>
<?php endforeach; ?>
        </div>
    </div>
<?php foreach ($stepItem as $index => $item): ?>
    <div ng-show="currentPageIndex === <?= $index ?>">
        <?= $item['content'] ?>

        <div class="card-header bg-white border-0 clearfix px-5">
            <div class="text-left pull-left">
<?php if ($index > 0): ?>
                <button type="button" class="layui-btn layui-btn-sm px-15 layui-btn-gray" ng-click="actionPrevStep(<?= $index ?>)">上一步</button>
<?php endif; ?>
            </div>
            <div class="text-right pull-right">
<?php if ($index + 1 < $countStep): ?>
                <button type="button" class="layui-btn layui-btn-sm px-15 layui-btn-theme" ng-click="actionNextStep(<?= $index ?>, '<?= $item["callId"] ?>')">下一步</button>
<?php endif; ?>

<?php if ($index + 1 >= $countStep && !empty($footerBtn['submit'])): ?>
                <button type="button" class="layui-btn layui-btn-sm px-15 layui-btn-theme" ng-click="actionSubmit('<?= $item["callId"] ?>')">
                    <?= $footerBtn['submit']['title'] ?>
                </button>
<?php endif; ?>

<?php foreach ($footerBtn as $type => $value): ?>
<?php switch ((string)$type): case 'close': //关闭按钮 ?>
                <button type="button" class="layui-btn layui-btn-sm px-15 layui-btn-primary ym2-form-close-ui" ng-click="actionClose()"><?= $value['title'] ?></button>
<?php break; case 'back': //返回按钮 ?>
                <button type="button" class="layui-btn layui-btn-sm px-15 layui-btn-primary ym2-form-back-ui" ng-click="actionBack()"><?= $value['title'] ?></button>
<?php break; default: //额外的按钮 ?>
                <div class="d-inline-block" ng-if="currentPageIndex === <?= $index ?>">
                    <?= $value['content'] ?>
                </div>
<?php endswitch; ?>
<?php endforeach; ?>
            </div>
        </div>
    </div>
<?php endforeach; ?>
</div>
